<template>
  <!-- 我的主页 -->
  <div class="myhome">
    <scroll class="myhome-scroll"
            ref="scroll">
      <!-- 基本信息 -->
      <div class="desc">
        <div class="left">
          <img :src="getAvatar"
               alt="">
        </div>
        <div class="right">
          <div class="top">
            <h2>{{getUserName}}</h2>
            <span class="leve">Lv{{userInfo.level}}</span>
          </div>
          <div class="bottom">
            <ul>
              <li>
                <span class="num">{{userInfo.accountStatus}}</span>
                <span>动态</span>
              </li>
              <li>
                <span class="num">{{userInfo.follows}}</span>
                <span>关注</span>
              </li>
              <li>
                <span class="num">{{userInfo.cCount}}</span>
                <span>粉丝</span>
              </li>
            </ul>
            <!-- 所在地区 -->
            <p class="time">创建时间：{{getcreateTime}}</p>
            <p class="place">所在地区：</p>
          </div>
        </div>
      </div>
      <!-- 听歌排行 -->
      <div class="title">
        听歌排行<span>累积听歌{{userInfo.listenSongs}}首</span>
        <div class="title-right">
          <span class="oneWeek"
                @click="weeklist()">最近一周</span>
          <span class="allTime"
                @click="alllist()">所有时间</span>
        </div>
      </div>
      <table cellspacing='0'>
        <tbody>
          <tr v-for="(item,index) of Songlist"
              :key="index"
              :class="{backColor:setBackColor(index)}"
              @dblclick="PlayMusic(index)">
            <td> {{setSerial(index)}}
              <span v-if="playIndex==index"
                    class="isshow"></span>
              <span v-else></span>
            </td>
            <td><strong>{{item.song.name}}</strong> - <em @click="enterArtist(item)">{{item.song.ar[0].name}}</em></td>
            <td>{{item.playCount}}次</td>
          </tr>
        </tbody>
      </table>
      <!-- 我创建的歌单 -->
      <div class="create-list">
        <p class="title">我创建的歌单 ({{this.$store.createList.length}})</p>
        <ul>
          <li v-for="(item,index) of this.$store.createList"
              :key="index"
              @click="enterDetail(index)">
            <img :src="item.coverImgUrl"
                 alt="">
            <p>{{item.name}}</p>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
      <!-- 我收藏的歌单 -->
      <div class="add-list">
        <p class="title">我收藏的歌单 ({{this.$store.addList.length}})</p>
        <ul>
          <li v-for="(item,index) of this.$store.addList"
              :key="index"
              @click="enterDetails(index)">
            <img :src="item.coverImgUrl"
                 alt="">
            <p>{{item.name}}</p>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll.vue'
import { _getUserMessage, User, _getPlaylist } from 'network/user'
import { AlbumSongDetail } from 'network/detail'
import { tableMixin } from 'mixin/tableMixin';
import { indexMixin } from 'mixin/indexMixin';
import { playMixin } from 'mixin/playMixin';
import moment from 'moment'
export default {
  components: { Scroll },
  name: 'MyHome',
  data () {
    return {
      id: 0,
      // 用户信息
      userInfo: {},
      // 用户播放记录信息提取
      musiclist: [],
      // 用户播放记录
      Songlist: [],
      type: 1
    }
  },
  mixins: [tableMixin, indexMixin, playMixin],
  computed: {
    // 动态设置登录后的头像
    getAvatar () {
      return this.$store.getters.getAvatar;
    },
    // 根据登录，显示不同名称
    getUserName () {
      return this.$store.getters.getUserName;
    },
    getcreateTime () {
      const createTime = moment(this.userInfo.creatTime).format('YYYY-MM-DD')
      return createTime;
    }
  },
  mounted () {
    this.id = this.$store.getters.getUserId;
    _getUserMessage(this.id).then(res => {
      this.userInfo = new User(res.data);
    });
    this.listenlist();
  },
  methods: {
    enterDetail (index) {
      // 传入我创建的歌单的id
      this.$router.push("/musiclistdetail/" + this.$store.createList[index].id + "/" + new Date().getTime());
    },
    enterDetails (index) {
      // 传入我收藏的歌单的id
      this.$router.push("/musiclistdetail/" + this.$store.addList[index].id + "/" + new Date().getTime());
    },
    // 进入歌手页面
    enterArtist (item) {
      this.$router.push('/artist/' + item.song.ar[0].id);
    },
    listenlist () {
      _getPlaylist(this.$store.getters.getUserId, this.changeType).then(res => {
        this.Songlist = res.data.allData || res.data.weekData;
        for (const i of this.Songlist) {
          // 根据歌曲的id获取 歌曲详情
          const song = new AlbumSongDetail(i.song)
          this.musiclist.push(song)
        }
      });
    },
    weeklist () {
      this.changeType = 1;
      this.listenlist()
    },
    alllist () {
      this.changeType = 0;
      this.listenlist();
    }
  }
}
</script>

<style scoped>
.myhome {
  height: 100%;
  padding: 30px 50px 0 50px;
  color: #333;
}
.myhome-scroll {
  height: 100%;
  overflow: hidden;
}
.desc {
  width: 100%;
  display: flex;
}
.desc .left {
  width: 22%;
}
.left img {
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.right {
  flex: 1;
}
.top {
  padding-bottom: 20px;
}
.top h2 {
  float: left;
  font-weight: normal;
  margin-right: 10px;
}
.top .leve {
  display: inline-block;
  width: 45px;
  height: 20px;
  line-height: 20px;
  color: #e03a24;
  font-weight: 700;
  border-radius: 14px;
  vertical-align: middle;
  border: 1.5px solid #e03a24;
  text-align: center;
}
.bottom {
  border-top: 1px solid rgb(212, 212, 212);
  padding-top: 10px;
}
.bottom ul {
  list-style: none;
  overflow: hidden;
}
.bottom ul li {
  float: left;
  padding: 0 25px;
  border-right: 1px solid rgb(199, 196, 196);
}
.bottom ul li:first-child {
  padding-left: 0;
}
li .num {
  display: block;
  font-size: 18px !important;
}
li span {
  font-size: 12px;
}
.bottom p {
  margin-top: 17px;
  font-size: 12px;
}
/* 听歌排行 */
.title {
  height: 40px;
  line-height: 40px;
  margin-top: 40px;
  font-size: 22px;
  border-bottom: 2px solid #00aa85;
}
.title span {
  font-size: 12px;
  margin-left: 10px;
}
.title-right {
  float: right;
}
.title-right span:first-child {
  border-right: 1px solid #ddd;
  padding: 0 10px;
}
table {
  width: 100%;
  border: 1px solid #ddd;
  font-size: 13px;
}
table tr {
  background: #fff;
  height: 40px;
}
tbody tr td {
  position: relative;
}
table tr td:nth-child(1) {
  width: 70px;
  text-align: left;
  padding: 0 10px;
  color: #999999;
}
table tr td:nth-child(2) {
  width: 60%;
  padding-left: 10px;
}
table tr td:nth-child(3) {
  padding-left: 20px;
}
table tr td .isshow {
  background-position: -20px -128px;
}
table tr td span {
  display: inline-block;
  width: 17px;
  height: 17px;
  background: url("../../assets/img/newest/table.png") no-repeat 0 9999px;
  background-position: 0 -103px;
  position: absolute;
  right: 5px;
  top: 12px;
}
.backColor {
  background: #f7f7f7 !important;
}
.clear {
  clear: both;
}
/* 我创建的歌单 */
.create-list,
.add-list {
  width: 100%;
  font-size: 12px;
}
.create-list ul li,
.add-list ul li {
  list-style: none;
  float: left;
  width: 200px;
  height: 210px;
  margin: 20px 40px 0 0px;
}
.create-list ul li img {
  width: 180px;
  height: 180px;
}
.add-list ul li img {
  width: 180px;
  height: 180px;
}
</style>
